<script setup lang='ts'>
import { onMounted } from 'vue'
// 定义接受props参数
// Vue 3.5+的版本的用法
// const { age = 10 } = defineProps<{
//     name: string,
//     age?: number
// }>()
// Vue 3.5以下的默认值的设置方式
const props = withDefaults(
    defineProps<{ name: string, age?: number, func?(count: number): void }>(),
    {
        name: "默认值",
        age: 100

    }
)
const test = () => {
    // 这里面拿到的是最新的传递过来的数据
    console.log(props.name, props.age)
}
onMounted(() => {
    test()
})

// 自定义事件类型
// updateChange-参数1个 number类型
const emits = defineEmits<{
    // key(事件名称): value(参数类型数组)
    "updataAge": [age: number],
    "updataName": [name: string],
    "updataAll": [age: number, name: string],
}>()
// 实现子传父
const toParent = () => {
    // 触发父组件的事件
    emits("updataAge", props.age - 1)
}
const toParentName = () => {
    // 触发父组件的事件
    emits("updataName", props.name + "1")
}

// const toParentAll = () => {
//     // 触发父组件的事件
//     emits("updataAll", props.age - 1, props.name + "1")
// }
</script>

<template>
    <div class="child">
        <h2>子组件显示父组件传递过来的数据</h2>
        <p>接受的姓名：{{ name }}</p>
        <p>接受的年龄：{{ age }}</p>
        <button @click="func(age - 1)">传递数据</button>
        <button @click="toParent">子传父-emits形式</button>
        <button @click="toParentName">子传父-emits改名字</button>
        <button @click="emits('updataAll', age + 1, name + '1')">子传父-改所有</button>
    </div>
</template>

<style scoped></style>